<template>
	<view class="page_content header-bg">
		<view class="head_content">
			<CustomNavbar title="Contact us"></CustomNavbar>
			<!-- <view class="title">{{$t('contact2')}}</view> -->
			<!-- <view class="desc">{{$t('contact2')}}</view> -->
			<view class="qr_body">
				<view class="kefu_img">
					<img style="width: 100%; height: 100%;" src="" />
				</view>
				<!-- <view class="qrcode_box">
					<img src="" class="qrcode" />
				</view> -->
				<!-- <view class="qrcode_title">$t('contact4')</view> -->
				<view class="tg" @click="jumpToTg">
          <u--image mode="aspectFit" width="104rpx" height="104rpx" src="" />
					<!-- <svg t="1721745040175" class="icon qrcode" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8329" width="64" height="64"><path d="M679.424 746.861714l84.004571-395.995428c7.424-34.852571-12.580571-48.566857-35.437714-40.009143l-493.714286 190.281143c-33.718857 13.129143-33.133714 32-5.705142 40.557714l126.281142 39.424 293.156572-184.576c13.714286-9.142857 26.294857-3.986286 16.018286 5.156571l-237.129143 214.272-9.142857 130.304c13.129143 0 18.870857-5.705143 25.709714-12.580571l61.696-59.428571 128 94.281142c23.442286 13.129143 40.009143 6.290286 46.299428-21.723428zM1024 512c0 282.843429-229.156571 512-512 512S0 794.843429 0 512 229.156571 0 512 0s512 229.156571 512 512z" fill="#1296db" p-id="8330"></path></svg> -->
				  <view class="info_box">
            <view class="title">
              BTCShort Telegram
            </view>
            <view class="desc">
              Contact Now
            </view>
          </view>
				</view>
				<!-- <view class="qrcode_box">
					<img src="./img/qrcode/3.png" class="qrcode" />
				</view> -->
				<view class="qrcode_title">BtcShort8</view>
			</view>
		</view>
	</view>
</template>

<script>
import uImage from '../../uview-ui/components/u--image/u--image.vue'
	export default {
  components: { uImage },
		data() {
			return {}
		},
		methods: {
      jumpToTg() {
        let url = 'https://t.me/BtcShort8'
        try{
          plus.runtime.openURL(url)
        }catch(err){
          window.location.href = url
        }
      }
    }
	}
</script>

<style scoped>
.head_content {
	background-image: url('./img/bg@2x.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.head_content .title {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 38rpx;
	color: #FFFFFF;
	line-height: 46rpx;
	text-align: center;
	margin-top: 128rpx;
}

.head_content .desc {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 27rpx;
	color: rgb(255, 255, 255, .5);
	line-height: 27rpx;
	text-align: center;
	margin-top: 28rpx;
}

.head_content .qr_body{
	margin: 0 auto;
	width: 646rpx;
	background: #1C1B1E;
	border-radius: 23rpx;
	position: relative;
	margin-top: 242rpx;
	padding-bottom: 64rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 64rpx;
}

.qr_body .kefu_img {
	width: 321.15rpx;
	height: 188.46rpx;
	position: absolute;
	top: -92rpx;
	left: 50%;
	transform: translate(-50%, 0);
}

.tg .desc {
  font-size: 30rpx;
  font-weight: 500;
  color: rgb(255, 255, 255, .7);
}

.tg {
  display: flex;
  margin-top: 128rpx;
  align-items: center;
  justify-content: center;
}

.tg .title {
  margin-top: 0 !important;
  margin-left: 48rpx;
}

.tg .qrcode{
  width: auto !important;
  height: auto !important;
  background: #FFFFFF;
  border-radius: 50%;
}

.qrcode_box .qrcode {
	width: 270rpx;
	height: 270rpx;
	border-radius: 10rpx;
}

.qr_body .qrcode_box {
	width: 330rpx;
	height: 330rpx;
	background-image: url('./img/ic_erweima@2x.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 84rpx;
}

.qr_body .qrcode_title, .tg .title {
	font-family: Futura, Futura;
	font-weight: 500;
	font-size: 38rpx;
	color: #FFFFFF;
	line-height: 52rpx;
	text-align: center;
  margin-top: 24rpx;
}

</style>
